<template>
  <div class="forum-list" style="padding: 20,20;">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-right: 30px; margin-top: 20px;">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>讨论</el-breadcrumb-item>
        </el-breadcrumb>
    <el-button type="primary" @click="handleNew()" style="float: right;">添加 <i class="el-icon-edit"></i></el-button>

    <el-table :data="postList" style="width: 100%;" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="user_id" label="发表ID"></el-table-column>
      <el-table-column prop="time" label="发表时间"></el-table-column>
      <el-table-column prop="id" label="链接">
        <template slot-scope="scope">
          <router-link :to="{ name: 'ComDetail', params: { id: scope.row.id } }">
            查看详情
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align:center; margin-top:20px; ">
    </el-pagination>

    <el-dialog :title="isEdit ? '编辑讨论' : '新建讨论'" :visible.sync="dialogVisible" width="50%">
      <el-form :model="post" :rules="rules" ref="postForm" label-position="top">
        <el-form-item label="标题" prop="title">
          <el-input v-model="post.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model="post.content" type="textarea" :rows="8" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {
      postList: [], // 论坛列表
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的数据量
      total: 0,// 数据总条数
      dialogVisible: false,
        isEdit: false,
        post: {
          title: '',
          content: ''
        },
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
            { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 10, max: 10000, message: '长度在 10 到 10000 个字符', trigger: 'blur' }
          ]
        }
    }
  },
  mounted() {
    this.getpostList()
  },
  methods: {
    // 获取论坛列表
    getpostList() {
      // 调用后端接口获取数据
      this.request.get('/post', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      }).then((response) => {
        const data = response.data
        console.log(data)
        this.postList = data.data.list
        this.total = data.data.total
      }).catch(error => {
        console.log(error)
      })
    },
    // 每页显示数据量改变时触发
    handleSizeChange(size) {
      this.pageSize = size
      this.getpostList()
    },
    // 当前页码改变时触发
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getpostList()
    },
    //编辑
    handleNew() {
      
      if(!this.$store.state.userInfo){
        this.$message.error("请登录后再进行此操作！");
      }else{
      this.dialogVisible = true;
      this.post = {
        title: '',
        content: '',
        user_id: this.$store.getters.getUser.id,
        time: this.getDate(),
        likes: '0',
      };
     }
    },
    //转换时间方法
    getDate() {
      //date是传过来的时间戳，注意需为13位，10位需*1000
      //也可以不传,获取的就是当前时间
      var time = new Date();
      var year = time.getFullYear()  //年
      var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
      var day = ("0" + (time.getDate()+1)).slice(-2); //日
      var mydate = year + "-" + month + "-" + day;
      return mydate
    },
    handleSubmit() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.request.post("/post/edit", this.post)
            .then(response => {
              this.$message.success('发布成功');
              this.dialogVisible = false;
              this.$emit('refresh');
              this.getpostList()
            })
            .catch(error => {
              console.error(error);
            });
        }
      });
    },
    handleCancel() {
      this.dialogVisible = false;
    }
  }
}
</script>